<script setup>
import {ref} from 'vue'
import Header from '@/components/Header/Header.vue'

const handleLogoClick = () => {
  console.log('Logo clicked!')
  // 这里可以添加跳转到首页的逻辑，例如使用 router.push('/')
}

const handleNavClick = (navItem) => {
  console.log('Navigation item clicked:', navItem)
  // 这里可以添加导航逻辑，例如使用 router.push(navItem.href)
}
</script>

<template>
  <div>
    <h2>1.基础用法</h2>
    <Header
        title="我的网站"
        logoSrc="https://picsum.photos/30/30?random=1.png"
        :navItems="[
    { label: '首页', href: '/' },
    { label: '产品', href: '/products' },
    { label: '关于', href: '/about' }
  ]"
        @logo-click="handleLogoClick"
        @nav-click="handleNavClick"
    />
    <h2>2.带副标题和样式定制</h2>
    <Header
        title="产品中心"
        subtitle="探索我们的解决方案"
        backgroundColor="#2c3e50"
        textColor="#ecf0f1"
        :height="80"
        :isSticky="true"
    />
    <h2>3.响应式断点配置</h2>
    <Header
        title="响应式示例"
        :breakpoint="1024"
        :navItems="[
    { label: '服务', href: '/services' },
    { label: '联系', href: '/contact' }
  ]"
    />

    <h2>4.事件处理</h2>
    <Header
        title="交互示例"
        @logo-click="handleLogoClick"
        @nav-click="handleNavClick"
        :navItems="[
    { label: '博客', href: '/blog' },
    { label: '文档', href: '/docs' }
  ]"
    />

    <h2>5.完整配置示例</h2>
    <Header
        title="完整示例"
        subtitle="欢迎访问我们的平台"
        logoSrc="https://picsum.photos/30/30?random=2.png"
        backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        textColor="#ffffff"
        height="100px"
        :isSticky="true"
        :breakpoint="'1024px'"
        :navItems="[
    { label: '产品', href: '/products' },
    { label: '定价', href: '/pricing' },
    { label: '支持', href: '/support' }
  ]"
        @logo-click="handleLogoClick"
        @nav-click="handleNavClick"
    />

  </div>

</template>

<style scoped>
h2{
  margin-top: 20px;
}
</style>